<template>
  <div class="storage-dashboard">
    <el-card class="storage-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="存储池" name="storagePool">
          <el-table :data="storageData" border>
            <el-table-column prop="total" label="总容量" sortable></el-table-column>
            <el-table-column prop="free" label="空闲容量" sortable></el-table-column>
            <el-table-column prop="used" label="已用容量" sortable></el-table-column>
            <el-table-column prop="usage" label="容量利用率">
              <el-progress :percentage="0.93"></el-progress>
            </el-table-column>
            <el-table-column prop="dataProtection" label="数据保护容量"></el-table-column>
            <el-table-column prop="allocated" label="已分配容量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="硬盘域" name="diskDomain">
          <el-table :data="diskDomainData" border>
            <el-table-column prop="total" label="总容量" sortable></el-table-column>
            <el-table-column prop="free" label="空闲容量" sortable></el-table-column>
            <el-table-column prop="allocated" label="已分配容量" sortable></el-table-column>
            <el-table-column prop="Hot" label="热备容量"></el-table-column>
            <el-table-column prop="Hotallocated" label="已用热备容量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="LUN" name="lun">
          <el-table :data="blockData" border>
            <el-table-column prop="total" label="总容量" sortable></el-table-column>
            <el-table-column prop="allocated" label="已分配容量" sortable></el-table-column>
            <el-table-column prop="usage" label="容量利用率"></el-table-column>
            <el-table-column prop="dataProtection" label="数据保护容量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="文件系统" name="fileSystem">
          <el-table :data="fileSystemData" border>
            <el-table-column prop="total" label="总容量" sortable></el-table-column>
            <el-table-column prop="used" label="已用容量" sortable></el-table-column>
            <el-table-column prop="free" label="可用容量" sortable></el-table-column>
            <el-table-column prop="usage" label="容量利用率">
              <el-progress :percentage="20"></el-progress>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="Dtree" name="dtree">
          <el-table :data="dtreeData" border>
            <el-table-column prop="used" label="已使用容量" sortable></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="配额" name="quota">
          <el-table :data="quotaData" border>
            <el-table-column prop="spacetotal" label="空间配额(软/硬)"></el-table-column>
            <el-table-column prop="spacefree" label="空间已用配额" sortable></el-table-column>
            <el-table-column prop="spaceusage" label="空间配额使用率" sortable></el-table-column>
            <el-table-column prop="filetotal" label="文件配额(软/硬)"></el-table-column>
            <el-table-column prop="filefree" label="文件已用配额" sortable></el-table-column>
            <el-table-column prop="fileusage" label="文件配额使用率" sortable></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'storagePool',
      storageData: [
        {total: '1000000 GB', free: '704000 MB', used: '9.312 GB', usage: '9.31%', dataProtection: '0.000 MB', allocated: '0.63%' }
      ],
      diskDomainData:[
        {total: '4.858 TB', free: '1.827 TB', allocated: '2.512 TB', Hot:'531.037 GB', Hotallocated:'265.518 GB'}
      ],
      blockData: [
        {total: '1.000 GB', allocated: '1.187 GB', usage: '-', dataProtection: '0.000 MB'}
      ],
      fileSystemData: [
        {total: '50.000 GB', used: '0.000 KB', free: '39.846 GB'}
      ],
      dtreeData:[
        {used: '6.000 KB' }
      ],
      quotaData:[
        {spacetotal: '1.000 GB/2.000 GB', spacefree: '16.000 EB', spaceusage: '4294967295', filetotal: '1000/1000', filefree: '184467440737095', fileusage: '4294967295' }
      ]
    }
  }
}
</script>

<style scoped>
.storage-dashboard {
  margin: 20px;
  background-color: #2b2b2b;;
}

.storage-card {
  margin-bottom: 20px;
  background-color: #2b2b2b;
}

::v-deep .el-table th,
::v-deep .el-table td {
  background-color: #2b2b2b;
  color: #ffffff;
  border-color: #444;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #333333;
}

::v-deep .el-table__row--striped td {
  background-color: #333333;
}

/* 调整标签的颜色 */
::v-deep .el-tabs__item {
  background-color: #2b2b2b;
  color: #ffffff;
  border-color: #444;
}

/* 调整激活标签的颜色 */
::v-deep .el-tabs__item.is-active {
  background-color: #2b2b2b;
  color: #409eff;
  border-color: #444;
}

/* 调整悬停时标签的颜色 */
::v-deep .el-tabs__item:hover {
  background-color: #333333;
  color: #409eff;
}

/* 为配额标签添加自定义下划线 */
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

::v-deep .el-tabs__item:last-child.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #409eff;
}
</style>